const chartDom5 = document.getElementById('main-chart-5');
const myChart5 = echarts.init(chartDom5);
var fontSize10 = 10
var fontSize12 = 12
var fontSize24 = 24
let data = [{name: '社会组织', value1: 100, value2: 80, value3: 60}, {
    name: '社会组织2',
    value1: 100,
    value2: 80,
    value3: 60
}, {name: '社会组织3', value1: 100, value2: 80, value3: 60}, {
    name: '社会组织4',
    value1: 100,
    value2: 80,
    value3: 60
}, {name: '社会组织5', value1: 100, value2: 80, value3: 60}]
let data1 = []
let data2 = []
let data3 = []
let data1Copy = []
let data2Copy = []
let data3Copy = []
let data1Copys = []
let data2Copys = []
let data3Copys = []
let color = ['#4AE8FF', '#D7FC75', '#F9B02E'];
let Name = ['工会', '共青团', '妇联'];
let xAxisData = [];
let series = []
data.forEach((item, index) => {
    xAxisData.push(item.name);
    data1.push(item.value1 * 0.8)
    data2.push(item.value2 * 0.8)
    data3.push(item.value3 * 0.8)
    data1Copy.push(Number(item.value1 * 1.1) >= 100 ? 100 : Number(item.value1 * 1.1))
    data1Copys.push(Number(item.value1 * 1.11) >= 100 ? 100 : Number(item.value1 * 1.11))
    data2Copy.push(Number(item.value2 * 1.1) >= 100 ? 100 : Number(item.value2 * 1.1))
    data2Copys.push(Number(item.value2 * 1.11) >= 100 ? 100 : Number(item.value2 * 1.11))
    data3Copy.push(Number(item.value3 * 1.1) >= 100 ? 100 : Number(item.value3 * 1.1))
    data3Copys.push(Number(item.value3 * 1.11) >= 100 ? 100 : Number(item.value3 * 1.11))
})
for (var j = 1; j < 4; j++) {
    if (j == 1) {
        var dataArr = data1
        var dataCopy = data1Copy
        var dataCopys = data1Copys
    } else if (j == 2) {
        var dataArr = data2
        var dataCopy = data2Copy
        var dataCopys = data2Copys
    } else if (j == 3) {
        var dataArr = data3
        var dataCopy = data3Copy
        var dataCopys = data3Copys
    }
    series.push({
        name: Name[j - 1],
        type: 'bar',
        stack: j,
        xAxisIndex: 0,
        data: dataArr,
        barWidth: 8,
        barGap: 2,
        itemStyle: {color: color[j - 1], barBorderRadius: 10, borderWidth: 2, borderColor: '#ffffff00',},
        z: 2
    }, {
        name: Name[j - 1],
        type: 'bar',
        xAxisIndex: 1,
        barGap: '140%',
        data: dataCopy,
        barWidth: 10,
        itemStyle: {
            color: '#0e2147',
            barBorderRadius: 10,
        },
        z: 1
    }, {
        name: Name[j - 1],
        type: 'bar',
        xAxisIndex: 2,
        data: dataCopys,
        barWidth: 12,
        barGap: 1,
        itemStyle: {
            color: color[j - 1],
            barBorderRadius: 10,
        },
        z: 0
    })
}


let option = {
    title: {show: false},
    legend: {
        show: true,
        top: 0,
        right: 0,
        itemWidth: 15,
        itemHeight: 10,
        itemStyle: {borderWidth: 0},
        textStyle: {fontSize: 10, color: '#fff'}
    },
    grid: {height: '80%', top: '20%', width: '90%', left: '5%', containLabel: true},

    xAxis: [{
        name: '',
        type: 'category', splitLine: {show: false}, axisTick: {show: false}, axisLine: {show: false}, axisLabel: {
            fontSize: fontSize12, color: '#fff', interval: 0,
            formatter: function (value) {
                return value.replace(/(.{3})/g, '$1\n')
            },
        }, data: xAxisData
    },
        {
            type: 'category',
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel: {show: false},
            splitArea: {show: false},
            splitLine: {show: false},
            data: xAxisData
        },
        {
            type: 'category',
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel: {show: false},
            splitArea: {show: false},
            splitLine: {show: false},
            data: xAxisData
        }],
    yAxis: {
        name: '进度（%）',
        nameTextStyle: {color: '#fff', fontSize: fontSize12,},
        type: 'value',
        axisTick: {show: false},
        axisLine: {show: false,},
        splitLine: {
            show: true, lineStyle: {
                color: "#353b5a",//线条颜色
                // type: "dashed"//线条样式，默认是实现，dashed是虚线
            }
        },
        axisLabel: {textStyle: {color: '#fff', fontSize: '12',}}
    },
    series: series,
    dataZoom: [{
        type: 'inside',
        xAxisIndex: [0, 1, 2],
        zoomOnMouseWheel: true,
        moveOnMouseMove: true,
        start: 0,
        end: 80
    }]
}


function myChartPieResize() {
    myChart5.resize();
}

myChart5.setOption(option);

